<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded">
        <ion-item class="ion-text-wrap" *ngIf="downloadCourseEnabled">
            <ion-label>
                <p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
            </ion-label>
        </ion-item>

        <ion-card class="wholecourse">
            <ion-card-header>
                <ion-card-title>
                    <core-format-text [text]="title" contextLevel="course" [contextInstanceId]="courseId" [adaptImg]="false" />
                </ion-card-title>
                <ion-item class="size ion-text-wrap ion-no-padding">
                    <ion-label>
                        <p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
                    </ion-label>
                    <ion-badge color="light" slot="end">
                        <ng-container *ngIf="!calculatingSize">{{ totalSize | coreBytesToSize }}</ng-container>
                        <ng-container *ngIf="calculatingSize">{{ 'core.calculating' | translate }}</ng-container>
                    </ion-badge>
                </ion-item>
                <ion-button *ngIf="downloadCourseEnabled" (click)="prefetchCourse($event)" expand="block" fill="outline"
                    class="ion-no-margin" [disabled]="prefetchCourseData.loading">
                    <ion-icon *ngIf="!prefetchCourseData.loading" [name]="prefetchCourseData.icon" slot="start" aria-hidden="true" />
                    <ion-spinner *ngIf="prefetchCourseData.loading" slot="start" />
                    {{ prefetchCourseData.statusTranslatable | translate }}
                </ion-button>
                <ion-button [disabled]="calculatingSize || totalSize <= 0" (click)="deleteForCourse($event)" expand="block" color="danger"
                    class="ion-no-margin ion-margin-top">
                    <ion-icon name="fas-trash" slot="start" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
                        { name: title }" />
                    {{ 'addon.storagemanager.deleteall' | translate }}
                </ion-button>
            </ion-card-header>
        </ion-card>

        <ion-accordion-group [multiple]="true" (ionChange)="accordionGroupChange($event.detail)" [value]="accordionMultipleValue">
            <ng-container *ngFor="let section of sections">
                <ng-container *ngTemplateOutlet="sectionCard; context: { section }" />
            </ng-container>
        </ion-accordion-group>

    </core-loading>
</ion-content>


<ng-template #sectionCard let-section="section">
    <ion-card class="section" *ngIf="section.contents.length > 0" [id]="'addons-course-storage-'+section.id">
        <ion-accordion [value]="section.id" toggleIconSlot="start">
            <ion-item [detail]="false" slot="header" class="card-header">
                <ion-label>
                    <p class="item-heading ion-text-wrap">
                        <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="section.course"
                            [adaptImg]="false" />
                    </p>
                    <ion-badge [color]="section.downloadStatus === statusDownloaded ? 'success' : 'light'"
                        *ngIf="!section.calculatingSize && section.totalSize > 0">
                        <ion-icon name="fam-cloud-done" *ngIf="section.downloadStatus === statusDownloaded"
                            [attr.aria-label]="'core.downloaded' | translate" />{{ section.totalSize | coreBytesToSize }}
                    </ion-badge>
                    <ion-badge color="light" *ngIf="section.calculatingSize">
                        {{ 'core.calculating' | translate }}
                    </ion-badge>
                    <!-- Download progress. -->
                    <p *ngIf="downloadEnabled && section.isDownloading">
                        <core-progress-bar
                            [progress]="section.total === undefined || section.total === 0 ? -1 : (section.count / section.total) * 100" />
                    </p>
                </ion-label>
                <div class="storage-buttons" slot="end" *ngIf="(!section.calculatingSize && section.totalSize > 0) || downloadEnabled">
                    <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
                        <core-download-refresh *ngIf="!section.isDownloading && section.downloadStatus !== statusDownloaded"
                            [status]="section.downloadStatus" [enabled]="true" (action)="prefetchSection(section)"
                            [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="true"
                            [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
                            [statusSubject]="section.name" />

                        <ion-badge class="core-course-download-section-progress"
                            *ngIf="section.isDownloading && section.total !== undefined && section.count < section.total" role="progressbar"
                            [attr.aria-valuemax]="section.total" [attr.aria-valuenow]="section.count"
                            [attr.aria-valuetext]="'core.course.downloadsectionprogressdescription' | translate:section">
                            {{section.count}} / {{section.total}}
                        </ion-badge>
                    </div>
                    <ion-button (click)="deleteForSection($event, section)" *ngIf="!section.calculatingSize && section.totalSize > 0"
                        color="danger" fill="clear">
                        <ion-icon name="fas-trash" slot="icon-only"
                            [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }" />
                    </ion-button>
                </div>
            </ion-item>
            <ion-card-content slot="content">
                <ng-container *ngIf="section.expanded">
                    <ng-container *ngFor="let modOrSubsection of section.contents">
                        @if (!isModule(modOrSubsection)) {
                        <ng-container *ngTemplateOutlet="sectionCard; context: { section: modOrSubsection }" />
                        } @else {
                        <ion-item class="core-course-storage-activity"
                            *ngIf="downloadEnabled || (!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0)">
                            <core-mod-icon slot="start" *ngIf="modOrSubsection.handlerData.icon"
                                [modicon]="modOrSubsection.handlerData.icon" [modname]="modOrSubsection.modname"
                                [componentId]="modOrSubsection.instance" [fallbackTranslation]="modOrSubsection.modplural"
                                [isBranded]="modOrSubsection.branded" />
                            <ion-label class="ion-text-wrap">
                                <p class="item-heading {{modOrSubsection.handlerData!.class}} addon-storagemanager-module-size">
                                    <core-format-text [text]="modOrSubsection.handlerData.title" [courseId]="modOrSubsection.course"
                                        contextLevel="module" [contextInstanceId]="modOrSubsection.id" [adaptImg]="false" />
                                </p>
                                <ion-badge [color]="modOrSubsection.downloadStatus === statusDownloaded ? 'success' : 'light'"
                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0">
                                    <ion-icon name="fam-cloud-done" *ngIf="modOrSubsection.downloadStatus === statusDownloaded"
                                        [attr.aria-label]="'core.downloaded' | translate" />{{ modOrSubsection.totalSize |
                                    coreBytesToSize }}
                                </ion-badge>
                                <ion-badge color="light" *ngIf="modOrSubsection.calculatingSize ||
                            (section.isDownloading && modOrSubsection.downloadStatus === statusDownloaded)">
                                    {{ 'core.calculating' | translate }}
                                </ion-badge>
                            </ion-label>

                            <div class="storage-buttons" slot="end">
                                <core-download-refresh *ngIf="downloadEnabled && modOrSubsection.handlerData?.showDownloadButton &&
                            modOrSubsection.downloadStatus !== statusDownloaded" [status]="modOrSubsection.downloadStatus" [enabled]="true"
                                    [canTrustDownload]="true" [loading]="modOrSubsection.spinner || modOrSubsection.handlerData.spinner"
                                    (action)="prefetchModule(modOrSubsection)"
                                    [statusesTranslatable]="{notdownloaded: 'addon.storagemanager.downloaddatafrom' }"
                                    [statusSubject]="modOrSubsection.name" />
                                <ion-button fill="clear" (click)="deleteForModule($event, modOrSubsection)"
                                    *ngIf="!modOrSubsection.calculatingSize && modOrSubsection.totalSize > 0" color="danger">
                                    <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="
                                        'addon.storagemanager.deletedatafrom' | translate: { name: modOrSubsection.name }" />
                                </ion-button>
                                <p *ngIf="!downloadEnabled || !modOrSubsection.handlerData?.showDownloadButton" class="sr-only">
                                    {{ 'core.notdownloadable' | translate }}
                                </p>
                            </div>
                        </ion-item>
                        }
                    </ng-container>
                </ng-container>
            </ion-card-content>
        </ion-accordion>
    </ion-card>
</ng-template>
